<script setup>
import { ElImage } from 'element-plus';
import { ref, onMounted } from 'vue';
import url1 from "/src/assets/img/break.jpg";
import url2 from "/src/assets/img/break1.jpg";
import url3 from "/src/assets/img/break2.jpg";
import url4 from "/src/assets/img/break3.jpg";


const tabs_content_box = ref();
const tabs_card = ref([url1, url2, url3, url4]);
const activeTab = ref(0); 
const url = ref(tabs_card.value[0]); 
const tabs_span = ref(null)
onMounted(() => {
  
  tabs_content_box.value.forEach((content, index) => {
    if(index === activeTab.value){
      content.style.display =  'block';
      tabs_span.value[index].classList.add("active");
    }
    
    
  });
});

const setActiveTab = (index) => {
  activeTab.value = index;
  console.log(index)
  url.value = tabs_card.value[index];
  tabs_content_box.value.forEach((content, i) => {
    content.style.display = i == activeTab.value ? 'block' : 'none';
    if (i === activeTab.value) {
    tabs_span.value[i].classList.add("active");
    } else {
    tabs_span.value[i].classList.remove("active");
    }
     });
};
</script>

<template>
  <div class="tabs">
    <div class="tabs_title">
      <div 
        v-for="(item, i) in tabs_card" 
        :key="i" 
        ref="tabs_span" 
        @click="setActiveTab(i)" 
        class="tabs_span"
      >
            就在身边的少儿科技素质教育
      </div>
    </div>

    <div class="tabs_content">
      <div 
        v-for="(item, index) in tabs_card" 
        :key="index" 
        ref="tabs_content_box" 
        class="tabs_content_box"
      >
        <div class="tabs_content_image">
          <div class="image">
            <el-image style="width: 100%; height: 100%;" fit="cover" :src="item" />
          </div>
        </div>
        <div class="tabs_content_p">
            线下200多家校区，遍布50多座城市，线上学习平台覆盖全国。满足孩子就近学习，更高效，更便捷。
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tabs {
  overflow: hidden;
  border-radius: 15px;
  height: 500px;
  margin: auto;
  width: 96%;
  display: flex;
}
.tabs_title {
  background-color: #b3b3c6;
  width: 40%;
}
.tabs_span {
  margin: auto;
  overflow: hidden;
  font-size: 1.2rem;
    text-align: center;
    line-height: 125px;
    height: 125px;
  transition-duration: 0.5s;
  box-sizing: border-box;
  padding: 10px;
  cursor: pointer;
}
.tabs_span:hover {
  background-color: #A0A0B1;
}
.active {
  color: white;
  background-color: #A0A0B1; /* Active tab background color */
}
.tabs_content {
    background-color: #A0A0B1;
  height: 500px;
  width: 60%;
  padding: 0;
  display: block;
}
.tabs_content_box {
  display: none;
  height: 100%;
}
.tabs_content_image {
    width: 100%;
  height: 75%;
}
.tabs_content_image .image {
  height: 100%;
}
.tabs_content_p{
    box-sizing: border-box;
    font-size: 1.1em;
    height: 120px;
    padding-top: 2em;
    padding-left: 1em;
    color: #ffffff;
}
</style>
